<template>
  <div class="card-detail">
    <van-nav-bar title="我要办卡" left-arrow @click-left="onClickLeft" />
    <div class="header">
      <img :src="cards[id].url || cards[id].urls[0]" alt />
      <p>{{ cards[id].title }}</p>
      <div>
        <div class="card-introduct">
          <span>新户礼</span>
          <span>新户1元购微信立减金券包</span>
        </div>
        <div class="divider" />
        <div class="card-introduct">
          <span>消费笔笔返</span>
          <span>消费笔笔返，最高返50%</span>
        </div>
        <div class="divider" />
        <div class="card-introduct">
          <span>新户专享</span>
          <span>限新客户申请</span>
        </div>
      </div>
      <footer>
        卡片详情
        <van-icon name="arrow" class="arrow-icon" />
      </footer>
    </div>
    <van-form class="form">
      <van-cell-group inset>
        <van-field v-model="cardNo" input-align="right" placeholder="请输入身份证号">
          <template #label>
            <span style="font-weight: bolder; color: black">身份证号</span>
          </template>
          <template #right-icon>
            <img class="carma" src="../../images/camar.svg" alt />
          </template>
        </van-field>
        <van-field v-model="name" input-align="right" placeholder="请输入姓名">
          <template #label>
            <span style="font-weight: bolder; color: black">姓名</span>
          </template>
        </van-field>
        <van-field
          input-align="right"
          is-link
          readonly
          label-width="12em"
          name="picker"
          placeholder="请选择"
          v-model="city"
          @click="showPicker = true"
        >
          <template #label>
            <div>
              <span style="font-weight: bolder; color: black">所在城市</span>
              <span class="fu-lable">公积金、个税、社保缴存所在城市</span>
            </div>
          </template>
        </van-field>
        <van-field input-align="right" v-model="phone" placeholder="请输入手机号码">
          <template #label>
            <span style="font-weight: bolder; color: black">手机号码</span>
          </template>
        </van-field>
        <van-field input-align="right" v-model="certNo" placeholder="请输入验证码">
          <template #label>
            <span style="font-weight: bolder; color: black">短信验证码</span>
          </template>
          <template #right-icon>
            <span class="getCert">获取验证码</span>
          </template>
        </van-field>
        <van-field input-align="right" placeholder="推荐员工号" label-width="7em" v-model="worker">
          <template #label>
            <span style="font-weight: bolder; color: black">推荐人(非必填)</span>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        title="请选择所在城市"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        :show-toolbar="true"
      />
    </van-popup>
    <div class="footer">
      <p>
        <van-checkbox v-model="checked" />
        <span>
          <span style="color: gray">我已阅读并同意</span>《信息查询及提供授权书》、《宁波银行信用卡申请相关协议》、《征信查询及提供授权书》
        </span>
        <van-icon name="arrow" class="arrow-icon" />
      </p>
      <div
        :class="{ submit: true, ok: isOk }"
        @click="isOk && $router.push({ name: 'applyCardResult' })"
      >立即申请</div>
    </div>
  </div>
</template>
<script>
import cards from "../../cards";
export default {
  name: "cardDetail",
  components: {},
  data() {
    return {
      id: 0,
      cards,
      checked: false,
      cardNo: "",
      name: "",
      city: "",
      phone: "",
      certNo: "",
      worker: "",
      showPicker: false,
      columns: [
        { text: "杭州", value: "Hangzhou" },
        { text: "宁波", value: "Ningbo" },
        { text: "温州", value: "Wenzhou" },
        { text: "绍兴", value: "Shaoxing" },
        { text: "湖州", value: "Huzhou" }
      ]
    };
  },
  computed: {
    isOk() {
      return (
        this.cardNo &&
        this.name &&
        this.city &&
        this.phone &&
        this.certNo &&
        this.checked
      );
    }
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    onConfirm(item) {
      this.city = item.text;
      this.showPicker = false;
    }
  },
  mounted() {
    this.id = this.$route.query.id;
  }
};
</script>
<style lang="less" scoped>
.card-detail {
  background-color: #eef0f8;
  padding-bottom: 110px;
  .header {
    width: 100vw;
    background-color: white;
    padding: 10px 0 11px 0;
    border-radius: 0 0 12px 12px;
    img {
      width: 319px;
      height: 203px;
      display: block;
      margin: 0px auto;
    }
    & > p {
      padding: 0;
      margin: 25px 0;
      font-size: 24px;
      text-align: center;
    }
    & > div {
      display: flex;
      text-align: center;
      justify-content: center;
    }
    & > footer {
      text-align: center;
      font-size: 12px;
      margin-top: 5px;
      color: rgb(85, 85, 85);
    }
  }
  .card-introduct {
    width: 125px;
    padding: 10px;
    span:first-child {
      color: rgb(252, 101, 6);
      font-size: 14px;
      line-height: 20px;
      display: block;
      width: 100%;
    }
    span:last-child {
      color: rgb(136, 136, 136);
      font-size: 12px;
      margin-top: 10px;
    }
  }
}
.divider {
  height: 40px;
  width: 1px;
  background-color: #dedede;
  margin-top: 15px;
}
.form {
  margin-top: 10px;
}
.carma {
  width: 20px;
  height: 20px;
  transform: translateY(3px);
}
.fu-lable {
  font-size: 10px;
  line-height: 12px;
  display: block;
  color: rgb(170, 170, 170);
}
.getCert {
  font-size: 12px;
  border: 1px solid #dedede;
  padding: 5px 10px;
  border-radius: 11px;
}
.footer {
  background-color: white;
  position: fixed;
  bottom: 0;
  height: 102px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  & > p {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > span {
      font-size: 12px;
      width: 300px;
      margin-left: 5px;
    }
  }
}
.submit {
  width: 320px;
  height: 44px;
  padding: 0 16px;
  margin: 10px auto 10px;
  text-align: center;
  line-height: 44px;
  background-color: #bcbfcc;
  color: white;
  border-radius: 22px;
}
.ok {
  background-image: linear-gradient(
    270deg,
    rgb(252, 101, 6) 0%,
    rgb(252, 133, 6) 100%
  );
}
</style>
